<template>
  <div ref="footerRigth" class="footer"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "FooterRigth",
  mounted() {
    let footerRigth = echarts.init(this.$refs.footerRigth);
    var priData = [
      {
        name: "20岁以下",
        value: 18,
      },
      {
        name: "20-30",
        value: 49,
      },
      {
        name: "31-35",
        value: 62,
      },
      {
        name: "36-40",
        value: 35,
      },
      {
        name: "41-50",
        value: 29,
      },
      {
        name: "51岁以下",
        value: 9,
      },
    ];
    footerRigth.setOption({
      title:{
        text:'年龄区间分布',
      },
      color: ["chartreuse", "green", "blue", "skyblue", "aqua", "blueviolet"], //自定义颜色全局使用
      tooltip: {
        show: true, //show:boolean  是否显示提示框组件
        formatter: "{a}<br/>{b}:{c}({d}%)",
      },
      legend: {
        show: true, //同tooltip中的show属性
        type: "scroll", //type:图例的类型，可选值有：plain（普通图例）、scroll（可滚动翻页的图例。使用时可以可以对其进行细节配置，此处省略）
        orient: "vertical", //orient:图例列表的布局朝向  可选值：horizontal（图例水平分布）、vertical(图例竖直分布)
        right: 10, //right/left属性同tooltip中的right/left属性
        top: 20, //top/bottom属性同tooltip中的top/bottom属性
      },
      series: [
        {
          name: "",
          type: "pie",
          data: priData,
        },
      ],
    });
    footerRigth.on('mouseover',(parans)=>{
      const name = parans.name
      footerRigth.setOption({
        series:[{
          name:name
        }]
      })
    })
  },
};
</script>

<style>
.footer {
  width: 100%;
  height: 100%;
}
</style>